<template>
  <iot-blk
    style="height: 1.7rem !important;"
    class="realtime-blk"
    :moreType="0"
    size="big"
    title="区域概况"
  >
    <div class="fl-ad" style="height: 1.3rem; ">
      <percent style="width: 40%;" :unitNumber="info.businessNumber"></percent>
      <div class="fl-bw flex wrap" style="width: 65%;height: 100%;">
        <deviceAlarm
          ref="deviceAlarm"
          :seriesData="seriesData"
          :unitNumber="1"
        ></deviceAlarm>
        <!-- <div class="flex info-item">
          <span class="iconfont">&#xe64e;</span>
          <div>
            <div>{{ info.emphasisRate || "0.00%" }}</div>
            <div class="unitname">消防安全重点单位</div>
          </div>
        </div>
        <div class="flex info-item">
          <span class="iconfont">&#xe996;</span>
          <div>
            <div>{{ info.commonRate || "0.00%" }}</div>
            <div class="unitname">消防安全一般单位</div>
          </div>
        </div>
        <div class="flex info-item">
          <span class="iconfont">&#xe99f;</span>
          <div>
            <div>{{ info.placeRate || "0.00%" }}</div>
            <div class="unitname">九小场所</div>
          </div>
        </div>
        <div class="flex info-item">
          <span class="iconfont">&#xe601;</span>
          <div>
            <div>{{ info.otherRate || "0.00%" }}</div>
            <div class="unitname">其他</div>
          </div>
        </div> -->
      </div>
    </div>
  </iot-blk>
</template>

<script>
import percent from "./percent.vue";
import deviceAlarm from "@/components/emergency/pie.vue";

export default {
  components: { percent, deviceAlarm },
  data() {
    return {
      info: {},
      seriesData: [],
    };
  },
  created() {},
  methods: {
    getData(areaId) {
      this.$get("/business/business/getRegionalInfo", { areaId }).then(
        (res) => {
          this.info = res.data;
          this.seriesData = [
            {
              name: "消防安全重点单位",
              value: res.data.emphasisRate,
            },
            {
              name: "消防安全一般单位",
              value: res.data.commonRate,
            },
            {
              name: "九小场所",
              value: res.data.placeRate,
            },
            {
              name: "其他",
              value: res.data.otherRate,
            },
          ];
        },
        (err) => {
          this.$message.error(err.msg || "系统错误");
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.iconfont {
  background: linear-gradient(to bottom, #83f5ff, #147de6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.15rem;
}
.info-item {
  width: 45%;
  color: aqua;
}
.unitname {
  font-size: 16px;
  margin-top: 10px;
  color: #fff !important;
}
</style>
